<template>
  <uni-popup 
    ref="popup" 
    :type="popupType" 
    :mask-click="maskClosable"
    @change="handlePopupChange"
  >
    <view class="popup-container">
      <!-- 背景图片 -->
      <image 
        class="popup-bg" 
        :src="backgroundImage" 
        mode="aspectFill"
      />
      
      <!-- 右上角图标 -->
      <view class="popup-icon">
        <image 
          :src="iconImage" 
          class="icon-image"
        />
      </view>
      
      <!-- 弹窗内容 -->
      <view class="popup-content">
        <!-- 主标题 -->
        <view class="popup-title">{{ title }}</view>
        
        
        <!-- 内容区域 -->
        <view class="popup-message">{{ message }}</view>
        
        <!-- 按钮区域 -->
        <view class="popup-buttons">
          <button 
            class="popup-btn" 
            @tap="handleCancel"
          >
            {{ confirmText }}
          </button>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'CommonPopup',
  props: {
    // 主标题
    title: {
      type: String,
      default: '提示'
    },
    // 副标题
    subtitle: {
      type: String,
      default: ''
    },
    // 内容消息
    message: {
      type: String,
      default: ''
    },
    // 确认按钮文字
    confirmText: {
      type: String,
      default: '确认'
    },
    // 取消按钮文字
    cancelText: {
      type: String,
      default: '取消'
    },
    // 是否显示取消按钮
    showCancel: {
      type: Boolean,
      default: false
    },
    // 背景图片
    backgroundImage: {
      type: String,
      default: '/static/commonPopup.png'
    },
    // 右上角图标
    iconImage: {
      type: String,
      default: '/static/commonTitle.png'
    },
    // 弹窗类型，用于预设样式
    type: {
      type: String,
      default: 'default', // default, success, error, warning
      validator: value => ['default', 'success', 'error', 'warning'].includes(value)
    },
    // uni-popup 弹窗类型
    popupType: {
      type: String,
      default: 'center', // center, top, bottom, left, right
      validator: value => ['center', 'top', 'bottom', 'left', 'right'].includes(value)
    },
    // 是否点击遮罩层关闭
    maskClosable: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 显示弹窗
    show() {
      this.$refs.popup.open();
    },
    // 隐藏弹窗
    hide() {
      this.$refs.popup.close();
    },
    // 切换弹窗显示状态
    toggle() {
      this.$refs.popup.toggle();
    },
    // 处理弹窗状态变化
    handlePopupChange(e) {
      if (!e.show) {
        this.$emit('close');
      }
    },
    // 确认按钮点击
    handleConfirm() {
      this.$emit('confirm');
      this.hide();
    },
    // 取消按钮点击
    handleCancel() {
      this.$emit('cancel');
      this.hide();
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-container {
  position: relative;
  width: 600rpx;
   height: 570rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.popup-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 570rpx;
  z-index: 1;
}

.popup-icon {
  position: absolute;
  top: 120rpx;
  left: 35rpx;
  width: 186rpx;
  height: 26rpx;
  z-index: 3;
}

.icon-image {
 width: 186rpx;
 height: 26rpx;
 background-size: 100% 100%;
}

.popup-content {
  position: relative;
  z-index: 2;
  padding: 60rpx 40rpx 40rpx;
  text-align: center;
  height: 75%;
}

.popup-title {
  font-size: 44rpx;
  font-weight: bold;
  color: #000;
  margin-bottom: 46rpx;
  line-height: 1.4;
  text-align: left;
}

.popup-subtitle {
  font-size: 24rpx;
  color: #4A90E2;
  margin-bottom: 30rpx;
  font-weight: 500;
  letter-spacing: 1rpx;
}

.popup-message {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 50rpx;
  padding: 0 20rpx;
  margin-top: 140rpx;
}

.popup-buttons {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.popup-btn {
  width: 80%;
  height: 80rpx;
  border-radius: 38rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background-color: #4593FA;
  color: #fff;
}

.confirm-btn {
  background: linear-gradient(135deg, #4A90E2, #357ABD);
  color: white;
  box-shadow: 0 4rpx 15rpx rgba(74, 144, 226, 0.3);
}

.confirm-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(74, 144, 226, 0.3);
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
  border: 2rpx solid #e0e0e0;
}

.cancel-btn:active {
  background-color: #e8e8e8;
}

/* 不同类型的预设样式 */
.popup-container.success {
  .popup-title {
    color: #52c41a;
  }
  .confirm-btn {
    background: linear-gradient(135deg, #52c41a, #389e0d);
    box-shadow: 0 4rpx 15rpx rgba(82, 196, 26, 0.3);
  }
}

.popup-container.error {
  .popup-title {
    color: #ff4d4f;
  }
  .confirm-btn {
    background: linear-gradient(135deg, #ff4d4f, #d9363e);
    box-shadow: 0 4rpx 15rpx rgba(255, 77, 79, 0.3);
  }
}

.popup-container.warning {
  .popup-title {
    color: #faad14;
  }
  .confirm-btn {
    background: linear-gradient(135deg, #faad14, #d48806);
    box-shadow: 0 4rpx 15rpx rgba(250, 173, 20, 0.3);
  }
}


</style>
